<template>
	<view class="content">
    <tab-bar ref='tabbar'></tab-bar>
    <view v-if="!isEdit" @click="btnEdit" class="an_1">编辑</view>
    <view v-if="isEdit" @click="btnFinish" class="an_1">完成</view>
    <view v-if="goodsList.length == 0" class="shopnull">
      <u-icon name="shopping-cart" color="#9B9B9B" size="120"></u-icon>
      <view class="shopnulltext">购物车空着哦~</view>
    </view>
    <view v-if="goodsList.length > 0" style="padding-bottom: 220rpx;">
      <view v-for="(item,index) in goodsList":key="index" class="goodsCon" >
      <u-checkbox-group @change="checkboxGroupChange"  class="groud">
        <u-checkbox
            @change="checkboxChange"
            v-model="item.checked" icon-size="13px"
            shape="circle" class="check_box"
        >
        </u-checkbox>
      </u-checkbox-group>
      <view class="image">
        <u-image width="100%" height="180rpx" :src="item.image"></u-image>
      </view>
      <view class="foods_info" >
        <view class="title" @tap="go_shopdetail(item)">{{ item.name }}</view>
        <view class="numPrice">
          <view class="price_0">￥{{ item.price }}</view>
          <u-number-box
              v-model="item.num"
              min="1"
              @minus="onMinus($event, index)"
              @plus = "onPlus($event, index)"
              @blur="onBlur($event, index)"
          ></u-number-box>
        </view>

      </view>
    </view>
    </view>
    <view class="shop_foot">
      <view class="all" @click="checkedAll">
        <u-checkbox v-model="allChecked" shape="circle">全选</u-checkbox>
      </view>
      <view class="count" v-if="!isEdit">
        <view class="le">合计: </view>
        <view class="price_0 le">￥{{ totalPrice }}</view>
        <u-button @click="goBalance" size="mini" type="primary" class="an_2 le">结算</u-button>
      </view>
      <view class="count" v-if="isEdit">
        <u-button @click="delBalance" size="mini" type="primary">删除</u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
export default {
  data() {
    return {
		// checked:false,
      goodsList:[],
      minNumber:1,
      isEdit:false,
      type:3, // 1 增加 2 减小, 3 手动输入
      delDataList:[],
      totalPrice:0,//总价
      allChecked:false,
      changeList:[]
    }
  },
  onLoad() {
    // uni.setStorageSync('selectedIndex', 2);
    // this.getgoodsList()
  },
  onShow() {
    this.getgoodsList()
    this.$refs.tabbar.getCount()
    uni.setStorageSync('selectedIndex', 2);

  },
  methods: {
    /**
     * 购物车列表
     * **/
    getgoodsList(){
      this.$myRequest({
        url: 'api/cart/index',
        method:'GET',
      }).then(res=>{
        console.log(res,"res购物车列表");
        if(res.data.code==1){

           this.goodsList = res.data.data.list
           this.resPrice =res.data.data.total
          console.log(this.goodsList.length,'!!!!!')
          if(this.goodsList.length  == 0){
            this.isEdit = false
            this.allChecked = false
            this.totalPrice = 0

          }

        }
      })
    },

    /*结算提交*/
    goBalance(){
      console.log('结算')
      let arr =[]
      for (const item of this.goodsList) {
        if(item.checked === true){
          arr.push(item.cart_id)
        }
      }

      if(arr.length > 0){
        let str = arr.join(',')
        this.$myRequest({
          url: 'api/order/cartConfirm',
          method:'POST',
          data:{
            cart_id:str,
          }
        }).then(res => {
          if(res.data.code==1){
            console.log('252525')
            uni.navigateTo({
              url:"tureOrder?allCartId="+str +"&pagetype=2"
              // url:"../../my/order/trueOrder?cart_id="+str
            })
          }
        })
      }else{
        this.$all.toast('请选择要结算的商品')
      }

    },
    /**
     * 全选
     * **/
    checkedAll() {
      if(this.allChecked == true){
        this.totalPrice =this.resPrice
      }else if(this.allChecked == false){
        this.totalPrice =0
      }
      this.goodsList.forEach((item,index)=>{
        if(this.allChecked == true){
          item.checked = true;
        }else if(this.allChecked == false){
          item.checked = false;
        }
      })
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      console.log(e,'00000')
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      let arr =[]
      let addArr =[]
      for (const item of this.goodsList) {
        if(item.checked === false){
          arr.push(item)
        }
        if(item.checked === true){
          addArr.push(item.cart_id)
        }
      }
      console.log(arr,'arr0000')
      console.log(addArr,'addArr0000')
      if(arr.length >0){
        this.allChecked = false
      }else{
        this.allChecked = true
      }
      this.$myRequest({
        url: 'api/cart/statistics',
        method:'POST',
        data:{
          cart_id:addArr.join(','),
        }
      }).then(res => {
        if(res.data.code==1){
           this.totalPrice= res.data.data.total
        }
      })
    },
    /**
     * 点击编辑按钮
     * **/
    btnEdit(){
      this.isEdit =true
    },
    btnFinish(){
      this.isEdit =false
    },
    /**
     * 删除
     * **/
    delBalance(){
      let arr =[]
      for (const item of this.goodsList) {
        if(item.checked == true){
          arr.push(item)
        }
      }
      this.delDataList= arr

      if(this.delDataList?.length ){
         let delArr =[]
        for (let  item of this.delDataList) {
          delArr.push(item.cart_id)
        }
        console.log(delArr,'666666')
        this.$myRequest({
          url: 'api/cart/cartDel',
          method:'POST',
          data:{
            cart_id:delArr.join(','),
          }
        }).then(res => {
          if(res.data.code==1){
            this.$all.toast('删除成功')
            this.$refs.tabbar.getCount()
            this.getgoodsList()
          }
        })

      }else{
        this.$all.toast('请选择要删除的商品')
      }
    },
    onMinus(e, index) {
      this.type =2
      console.log(this.goodsList[index],'index')
      if (this.goodsList[index].num > 0) {
        this.geteditCart(index)
      } else {
        // 如果数量减少到1，则将数量设置为0，而不是删除数组项
        this.goodsList[index].num= 1;
      }
      console.log(this.type,'-')
    },
    onPlus(e, index){
      this.type = 1
      if (this.goodsList[index].num > 0) {
        this.geteditCart(index)
      }
      console.log(this.type,'+')
    },
    onBlur(e,index) {
      this.type = 3
      console.log('当前值为: ' + e.value)
      this.goodsList[index].num = e.value;
      console.log(this.type,'手动输入')
      this.geteditCart(index)
    },
    geteditCart(index){
      this.$myRequest({
        url: 'api/cart/edit_cart',
        method:'POST',
        data:{
          cart_id:this.goodsList[index].cart_id,
          type:this.type,
          num:this.goodsList[index].num
        }
      }).then(res => {
        if(res.data.code==1){
          // 总价格请求接口
          let arr =[]
          for (const item of this.goodsList) {
            if(item.checked === true){
              arr.push(item.cart_id)
            }
          }
          this.$myRequest({
            url: 'api/cart/statistics',
            method:'POST',
            data:{
              cart_id:arr.join(','),
            }
          }).then(res => {
            if(res.data.code==1){
              this.totalPrice= res.data.data.total
            }
          })



          this.$refs.tabbar.getCount()
        }
      })
    },
    go_shopdetail(e){
      uni.navigateTo({
        url:'../shop/shopDetail?shopid='+e.goods_id
      })
    },


  }
}
</script>
<style>
	.groud .u-icon,.shop_foot .u-icon{ display: block !important;}
	
</style>
<style scoped lang="scss">
.content{
  width: 100%;
  padding: 15rpx;
  .an_1{ text-align: right; padding: 10rpx 0;}
}
.goodsCon {
  display: flex;
  margin: auto;
  padding: 10px 0px 5px 10px;
  .groud{ margin-right: 20rpx; position: relative; width:20px;	
	.check_box{ position: absolute; top:50%; left: 0%; transform: translateY(-50%);
	}
  }

  .image {
    width: 180rpx;
    height: 180rpx;
    background-color: #a1a1a1;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }

  .foods_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    margin-left: 20rpx;
	.title{ margin: 4px 0;}
    .numPrice{
      display: flex;
      justify-content: space-between;
      flex: 1;
    }

  }
}
.shop_foot{
  height: 100rpx;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 110rpx;
  border-top: 1px solid #eeeeee;
  background: #fff;
  line-height:85rpx;
  .all{ float:left; margin-left: 30rpx;}
  .an_2{
	  
  }
}
.price_0{
  font-size: 16px;
  color: #FF0000; margin:0 20rpx;
}
.title,.price_0{
  font-weight: bold;
}
.count{
  // display: flex;
  // justify-content: space-between;
  // margin: auto;
  float: right;margin-right: 30rpx;

}
.onsub{
  margin-left:19rpx;
  background:#FF9101;
  color: #ffffff;
  border-radius:20rpx;
  height:60rpx;
  line-height: 50rpx;
  padding:0 25rpx;
  font-weight:bold;
  margin-top:15rpx;
}
.le{ float: left;}
.shopnull{
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}
.shopnulltext{
  font-size: 14px;
  color: #9B9B9B;
  font-weight: bold;
}
.shopnullimg{
  height: 60rpx;
  width: 60rpx;
}
</style>